<!-- card -->
<template>
    <div
        class="flex-col-start card-page"
        @click="onJumpApp">
        <van-image
            class="img"
            :src="resourcePoster"
            position="center"
            fit="cover" />
        <div class="mask">
            <van-image
                class="btn"
                fit="cover"
                src="https://cdn.kumiamei.com/web/test/play-a7828b5d7.png" />
            <div class="name">{{ resourceName || '' }}</div>
            <div class="tag">{{ resourceLabel.join(',') || '' }}</div>
            <div class="flex flex-between score_container">
                <van-rate
                    class="star"
                    v-model="displayScore"
                    readonly
                    count="5"
                    color="#FFD500"
                    size="0.32rem"
                    void-icon="star"
                    void-color="#3d3c41"
                    allow-half />
                <div
                    class="score"
                    v-if="score">
                    {{ scoreComp }}
                </div>
                <img
                    v-else
                    src="https://fe.kumiamei.com/web/test/icon_empty-9cfa2e789.png"
                    alt="" />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { computed } from 'vue';

    const emit = defineEmits(['onJumpApp']);

    const props = withDefaults(
        defineProps<{
            resourcePoster?: string;
            resourceName?: string;
            resourceLabel?: string[];
            score?: number;

            tribeId?: string;
            clubDisPlayId?: string;
            channelDisPlayId?: string;
            channelId?: string;
            msgUID?: string;
            messageTime?: number | string;
        }>(),
        {
            resourcePoster: '',
            resourceName: '',
            resourceLabel: () => {
                return [];
            },
            score: 0,
        }
    );
    // 星星展示
    const displayScore = computed(() => {
        return !props.score ? null : Number(props.score) / 2;
    });
    // 评分展示
    const scoreComp = computed(() => {
        if (!props.score) {
            return '- -';
        }
        return props.score.toFixed(1);
    });

    function onJumpApp() {
        emit('onJumpApp', {
            clubId: props.tribeId || '',
            clubDisplayId: props.clubDisPlayId || '',
            channelId: props.channelId || '',
            channelDisplayId: props.channelDisPlayId || '',
            msgId: props.msgUID || '',
            messageTime: props.messageTime || '',
        });
    }
</script>
<style lang="scss" scoped>
    .card-page {
        position: relative;
        margin-bottom: 24px;
        width: 320px;
        height: 456px;
        border-radius: 32px;
        overflow: hidden;
        color: rgba(255, 255, 255, 0.9);

        .img {
            z-index: 1;
        }
        .img,
        .mask {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .mask {
            z-index: 2;
            padding: 25px 25px 0;
            background: linear-gradient(180deg, rgba(23, 23, 29, 0) 21.35%, #17171d 75.52%);

            .btn {
                margin-left: pxToRem(192, 75);
                width: 80px;
                height: 80px;
                .play {
                    width: 40px;
                    height: 40px;
                }
                z-index: 10;
            }

            .name {
                margin-top: pxToRem(184, 75);
                font-weight: 600;
                font-size: 32px;
                line-height: 40px;
                color: rgba(255, 255, 255, 0.9);
            }
            .name,
            .tag {
                width: 271px;
                @include lineClamp(1);
            }

            .tag {
                font-weight: 400;
                font-size: 24px;
                line-height: 32px;
                color: rgba(255, 255, 255, 0.6);
            }

            .score_container {
                height: 50px;
                margin-top: pxToRem(8, 75);
                align-items: center;

                .score {
                    font-weight: 700;
                    font-size: 48px;
                    text-align: right;
                    color: rgba(255, 255, 255, 0.9);
                }
            }
        }
    }
</style>
